<!DOCTYPE html>
{% load static %}
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <title>短信登录</title>
    <link rel="stylesheet" href="{% static 'css/login_sms/index.css' %}">
    <link rel="shortcut icon" href="{% static 'imgs/favicon/login_sms.ico' %}"/>
    <style>
        .error-msg {
            position: relative;
            margin-left: 35px;
            color: red;
        }

        #spanCss {
            width: 80%;
            position: relative;
            margin-left: 360px;

        }

        #btnCSS {
            border: 3px solid rgb(30, 60, 80);
            box-shadow: 3px 3px 3px rgb(30, 60, 80);
            color: rgb(247, 131, 110);
        }

        #btnCSS:hover {
            font-size: 18px;
            cursor: pointer;
            color: #255625;

        }

        .login-btn2 {
            width: 80%;
            position: relative;
            margin-top: 90px;
            margin-left: 230px;

        }

        .red_input {
            border: 1px solid red;
        }

        .green_input {
            border: 1px solid green;
        }

    </style>
</head>
<body style="">
<canvas class="cavs" width="1366" height="609"></canvas>

<div class="loginmain">
    <div class="login-title">
        <span>短信登录</span>
    </div>
    <form id="login_sms_form">
        {% csrf_token %}
        <div class="login-con">
            <div class="login-user">
                <div class="icon">
                    <img src="{% static 'imgs/register/user_icon_copy.png' %}" alt="">
                </div>
                <label for="id_telephone">
                    <input type="text" name="telephone" placeholder="请输入手机号" autocomplete="off" value=""
                           id="id_telephone">
                    <span class="error-msg"></span>
                </label>
                <div id="spanCss"><span id="btnCSS" onselectstart="return false;" unselectable="on">点击发送验证码</span>
                </div>
            </div>

            <div class="login-yan">
                <div class="icon">
                    <img src="{% static 'imgs/register/key.png' %}" alt="">
                </div>
                <label for="id_code">
                    <input type="text" name="code" placeholder="验证码" autocomplete="off" value="" id="id_code">
                    <span class="error-msg"></span>
                </label>
            </div>

            <div class="login-btn">
                <input type="button" value="登录" id="login_sms">
            </div>
            <div class="login-btn2">
                <a href="{% url 'register' %}">
                    <input type="button" value="没有账号?注册" id="btnLogin">
                </a>
            </div>
        </div>
    </form>
</div>


<script src="{% static 'js/register/jquery-1.10.2.js' %}"></script>
<script src="{% static 'js/register/jquery.min.js' %}"></script>
<script src="{% static 'js/register/ban.js' %}"></script>
<script>
    $(function () {
        tencent_sms();
        login_sms();
    });

    // 手机号验证码发送
    function tencent_sms() {
        $('#btnCSS').click(function () {
            var telephone = $('#id_telephone').val();
            $.ajax(
                {
                    url: "{% url 'tencent_sms' %}",
                    type: "GET",
                    data: {telephone: telephone, tpl: 'login'},
                    dataType: "JSON",
                    success: function (ret) {
                        if (ret.status) {
                            // 定时器
                            smsWait();
                        } else {
                            // 渲染错误
                            $.each(ret.msg, function (key, value) {
                                $('#id_' + key).addClass('red_input').next().text(value[0])
                                // attr 只有添加的一个属性 其他的全部消失 addClass 在原有的基础上添加类
                            })
                        }
                    }
                }
            )
            // 获取焦点 input红框消失 this： 当前操作的对象
            $('input').focus(function () {
                $(this).removeClass('red_input').next().empty()
            })
        })
    }

    // 登录
    function login_sms() {
        $('#login_sms').click(function () {
            $.ajax({
                url: "{% url 'login_sms' %}",
                type: "POST",
                data: $("#login_sms_form").serialize(),
                dataType: "JSON",
                success: function (ret) {
                    if (ret.status) {
                        location.href = "{% url 'home' %}"
                    } else {
                        // 渲染错误
                        $.each(ret.msg, function (key, value) {
                            $('#id_' + key).addClass('red_input').next().text(value[0])
                            // attr 只有添加的一个属性 其他的全部消失 addClass 在原有的基础上添加类
                        })
                    }
                }

            })
            // 获取焦点 input红框消失 this： 当前操作的对象
            $('input').focus(function () {
                $(this).removeClass('red_input').next().empty()
            })
        })
    }

    // 计时器
    function smsWait() {

        // 获取button按钮
        var $smsBtn = $('#btnCSS');

        // time = 60
        var time = 60;
        // 函数
        var remind = setInterval(function () {
            // 给button按钮添加文本
            $smsBtn.text('请等待' + time + '后,重新发送');
            // 自减
            time = time - 1;
            // 当time<1,停止函数，恢复按钮
            if (time < 1) {
                // 清除函数
                clearInterval(remind)
                $smsBtn.text('点击获取验证码');
            }
        }, 1000)
    }
</script>
</body>
</html>